<template>
  <el-form  style="max-width: 600px" :model="ruleForm" status-icon label-width="auto" >
    <el-form-item prop="oldpassword">
      <template v-slot:label>
        <span style="color:red">*</span>旧密码
      </template>
      <el-input v-model="ruleForm.oldpassword" autocomplete="off" @blur="checkPassword()"/>
    </el-form-item>
    <el-form-item prop="newpassword">
      <template v-slot:label>
        <span style="color:red">*</span>新密码
      </template>
      <el-input v-model="ruleForm.newpassword" :disabled="oldInf" autocomplete="off" @blur="checkInf()"/>
    </el-form-item>
    <el-form-item prop="confirmpassword">
      <template v-slot:label>
        <span style="color:red">*</span>确认密码
      </template>
      <el-input v-model="ruleForm.confirmpassword" :disabled="newInf" autocomplete="off" @blur="checkAll()"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="editPassword">保存</el-button>
      <el-button @click="router.push('/homepage')">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import axios from "axios";
import {ref} from "vue";
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
let router = useRouter();
const oldInf = ref(true);
const newInf = ref(true);
const allInfor = ref(true);
const ruleForm = ref({
  id: JSON.parse(sessionStorage.getItem('loginInfor')).id,
  oldpassword: '',
  newpassword: '',
  confirmpassword: '',
})


function editPassword() {
  if(ruleForm.value.newpassword == ruleForm.value.confirmpassword&&ruleForm.value.newpassword!=null&&ruleForm.value.newpassword!=''){
    axios.put('/us/editPassword', 
      {
        id: JSON.parse(sessionStorage.getItem('loginInfor')).id,
        username: JSON.parse(sessionStorage.getItem('loginInfor')).username,
        password: ruleForm.value.newpassword, 
      }
    )
    .then(function (response) { 
      if (response.data.code == 1) {
        ElMessage({
        message: '修改成功',
        type: 'success', 
      })  
      router.push('/login');
      }
    })
  }else{
    ElMessage({
      message: '两次密码输入不一致或为空',
      type: 'warning',
    }) 
  }
}

function checkInf() {
  if(ruleForm.value.newpassword !=null && ruleForm.value.newpassword!='') {
    newInf.value = false;
  }else{
    newInf.value = true;
    ruleForm.value.confirmpassword = '';
  }
  
}

function checkPassword() {
  //console.log(11111);
  if(ruleForm.value.oldpassword==null || ruleForm.value.oldpassword=='') {
    oldInf.value = true;
    ruleForm.value.newpassword = '';
    return;
  }
  
  axios.get('/us/passwordCheck', 
    {
      params: {
        p1: JSON.parse(sessionStorage.getItem('loginInfor')).password,
        un: JSON.parse(sessionStorage.getItem('loginInfor')).username,
        p2: ruleForm.value.oldpassword,
      } 
    }
  ).then(res => {
    //console.log(res);
    
    if (res.data.code == 1) {
      oldInf.value = false;
    }else{
      ElMessage({
        message: '旧密码输入错误',
        type: 'warning',
      })
      ruleForm.value.oldpassword = '';
      ruleForm.value.newpassword = '';
      oldInf.value = true;
      ruleForm.value.confirmpassword = '';
      newInf.value = true;
    }
  })
}



</script>

<style scoped>
.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #eee;
}

</style>